<template>
  <view class="phrase-training-game">
    <!-- 游戏主区域 -->
    <view class="game-container">
      <!-- 题目类型提示 -->
      <view class="question-type">
        <text class="type-badge">{{ questionType === 'en-to-cn' ? '英译中' : '中译英' }}</text>
        <text class="type-hint">{{ questionType === 'en-to-cn' ? '选择正确的中文意思' : '补全英文短语' }}</text>
      </view>

      <!-- 题目区域 -->
      <view class="question-area">
        <!-- 英文提示模式 -->
        <view v-if="questionType === 'en-to-cn'" class="question-en-to-cn">
          <view class="phrase-display">
            <text class="phrase-text">{{ currentQuestionData.phrase.p }}</text>
          </view>
        </view>

        <!-- 中文提示模式 -->
        <view v-else class="question-cn-to-en">
          <view class="phrase-blanks">
            <view
                v-for="(blank, index) in currentQuestionData.blanks"
                :key="index"
                class="blank-item"
                :class="{ filled: blank.filled }"
            >
              <text v-if="blank.filled" class="blank-text">{{ blank.text }}</text>
              <text v-else class="blank-placeholder">___</text>
            </view>
          </view>
          <text class="meaning-hint">中文意思：{{ currentQuestionData.phrase['zh-mean'] }}</text>
        </view>
      </view>

      <!-- 选项区域 -->
      <view class="options-area">
        <!-- 中文选项（英译中模式） -->
        <view v-if="questionType === 'en-to-cn'" class="chinese-options">
          <view
              v-for="(option, index) in currentQuestionData.options"
              :key="index"
              class="option-item"
              :class="getOptionClass(option)"
              @click="selectOption(option)"
          >
            <text class="option-text">{{ option.text }}</text>
            <text v-if="option.isCorrect && showResult" class="option-result">✓</text>
            <text v-else-if="option.selected && !option.isCorrect && showResult" class="option-result">✗</text>
          </view>
        </view>

        <!-- 英文选项（中译英模式） -->
        <view v-else class="english-options">
          <view
              v-for="(option, index) in currentQuestionData.options"
              :key="index"
              class="option-item"
              :class="getOptionClass(option)"
              @click="selectOption(option)"
          >
            <text class="option-text">{{ option.text }}</text>
            <text v-if="option.isCorrect && showResult" class="option-result">✓</text>
            <text v-else-if="option.selected && !option.isCorrect && showResult" class="option-result">✗</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 游戏头部信息 -->
    <view class="game-header">
      <view class="score-info">
        <text class="score-label">分数</text>
        <text class="score-value">{{ score }}</text>
      </view>
      <view class="progress-info">
        <text class="progress-label">进度</text>
        <text class="progress-value">{{ currentQuestion }}/{{ totalQuestions }}</text>
      </view>
      <view class="error-info">
        <text class="error-label">错误</text>
        <text class="error-value">{{ errors }}/{{ maxErrors }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button
          class="action-btn submit-btn"
          :disabled="!hasSelected || showResult"
          @click="submitAnswer"
      >
        <text class="btn-text">提交答案</text>
      </button>

      <button
          class="action-btn hint-btn"
          @click="showHint"
          :disabled="showResult || hintsAvailable <= 0"
      >
        <text class="btn-text">提示 ({{ hintsAvailable }})</text>
      </button>
    </view>

    <!-- Toast提示 -->
    <view v-if="showToast" class="toast-container" :class="toastType">
      <view class="toast-content">
        <text class="toast-icon">{{ toastIcon }}</text>
        <text class="toast-text">{{ toastMessage }}</text>
      </view>
    </view>

    <!-- 游戏结束弹窗 -->
    <view v-if="showGameOver" class="game-over-modal">
      <view class="modal-content">
        <text class="modal-title">{{ gameResult === 'win' ? '🎊 恭喜完成！' : '💔 游戏结束' }}</text>

        <view class="modal-stats">
          <view class="stat-item">
            <text class="stat-label">最终得分</text>
            <text class="stat-value">{{ score }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">正确题数</text>
            <text class="stat-value">{{ correctCount }}/{{ totalQuestions }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">准确率</text>
            <text class="stat-value">{{ Math.round((correctCount / totalQuestions) * 100) }}%</text>
          </view>
        </view>

        <view class="modal-actions">
          <button class="modal-btn restart-btn" @click="restartGame">
            <text>再玩一次</text>
          </button>
          <button class="modal-btn exit-btn" @click="exitGame">
            <text>退出</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getWordListByCourseId} from "../../../api/wordSystemCourse";
import push from "../../../platforms/app-plus/push/push.vue";

export default {
  name: "PhraseTrainingGame",
  props: {
    wordData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 游戏状态
      score: 0,
      currentQuestion: 1,
      totalQuestions: 0,
      errors: 0,
      maxErrors: 0,
      correctCount: 0,
      showResult: false,
      isAnswerCorrect: false,
      showGameOver: false,
      gameResult: '', // 'win' or 'lose'

      // 提示系统
      hintsAvailable: 0,

      // Toast提示
      showToast: false,
      toastType: '', // 'success' or 'error'
      toastMessage: '',
      toastIcon: '',
      toastTimer: null,

      // 当前题目数据
      currentQuestionData: {
        phrase: {},
        options: [],
        blanks: [],
        questionType: '' // 'en-to-cn' or 'cn-to-en'
      },

      // 所有短语数据
      allPhrases: [],
      usedPhrases: new Set(),

      // 选择状态
      selectedOption: null,
      hasSelected: false
    };
  },

  computed: {
    questionType() {
      return this.currentQuestionData.questionType;
    }
  },

  onLoad() {
    this.initGame();
  },

  onUnload() {
    // 清理定时器
    if (this.toastTimer) {
      clearTimeout(this.toastTimer);
    }
  },

  methods: {
    // 初始化游戏
    async initGame() {
      // 加载数据
      await this.loadData()
      // 提取短语
      this.extractAllPhrases()
      // 生成题目
      this.generateNewQuestion()
    },

    async loadData() {
      const res = await getWordListByCourseId({courseId: this.$route.query.courseId})
      this.wordData = []
      res.forEach(item => {
        if (item.extendedInfo) {
          this.wordData.push(item)
        }
      })
      this.hintsAvailable = Math.min(this.wordData.length, 3)
    },

    // 显示Toast提示
    showToastMessage(type, message) {
      this.showToast = true;
      this.toastType = type;
      this.toastMessage = message;
      this.toastIcon = type === 'success' ? '🎉' : '😔';

      // 清除之前的定时器
      if (this.toastTimer) {
        clearTimeout(this.toastTimer);
      }

      // 2秒后自动隐藏Toast并进入下一题
      this.toastTimer = setTimeout(() => {
        this.showToast = false;
        this.autoNextQuestion();
      }, 1000);
    },

    // 自动下一题
    autoNextQuestion() {
      if (this.currentQuestion >= this.totalQuestions || this.errors > this.maxErrors) {
        this.endGame();
      } else {
        this.nextQuestion();
      }
    },

    // 提取所有短语
    extractAllPhrases() {
      this.allPhrases = [];
      this.wordData.forEach(item => {
        try {
          const extendedInfo = JSON.parse(item.extendedInfo);
          if (extendedInfo.phrases && Array.isArray(extendedInfo.phrases)) {
            extendedInfo.phrases.forEach(phrase => {
              this.allPhrases.push({
                ...phrase,
                sourceWord: extendedInfo.word
              });
            });
          }
        } catch (error) {
          console.error('解析短语数据失败:', error);
        }
      });

      console.log('提取到的短语:', this.allPhrases);
      this.totalQuestions = Math.min(this.allPhrases.length, 30);
      this.maxErrors = Math.ceil(this.totalQuestions / 5);
    },

    // 生成新题目
    generateNewQuestion() {
      // 没有可用的短语数据
      if (this.allPhrases.length === 0) {
        return;
      }

      this.shuffleArray(this.allPhrases)

      // 随机选择未使用过的短语
      let availablePhrases = this.allPhrases.filter(phrase => !this.usedPhrases.has(phrase.p));

      if (availablePhrases.length === 0) {
        // 如果所有短语都已使用，重置使用记录
        this.usedPhrases.clear();
        availablePhrases = [...this.allPhrases];
      }

      const randomIndex = Math.floor(Math.random() * availablePhrases.length);
      const selectedPhrase = availablePhrases[randomIndex];
      this.usedPhrases.add(selectedPhrase.p);

      // 随机决定题目类型
      const questionType = Math.random() > 0.5 ? 'en-to-cn' : 'cn-to-en';

      // 生成题目数据
      this.currentQuestionData = {
        phrase: selectedPhrase,
        questionType: questionType,
        options: [],
        blanks: []
      };

      // 根据题目类型生成选项
      if (questionType === 'en-to-cn') {
        this.generateChineseOptions(selectedPhrase);
      } else {
        // 中译英
        this.generateEnglishOptions(selectedPhrase);
      }

      this.selectedOption = null;
      this.hasSelected = false;
      this.showResult = false;
    },

    // 生成中文选项（英译中）
    generateChineseOptions(phrase) {
      const correctOption = {
        text: phrase['zh-mean'],
        isCorrect: true,
        selected: false
      };

      // 获取错误选项
      const wrongOptions = this.getWrongChineseOptions(phrase['zh-mean']);

      // 合并选项并随机排序
      this.currentQuestionData.options = this.shuffleArray([
        correctOption,
        ...wrongOptions
      ]);
    },

    // 生成英文选项（中译英）
    generateEnglishOptions(phrase) {
      const words = phrase.p.split(' ');
      const wordCount = words.length;

      // 随机决定挖空数量（1到单词数）
      const blankCount = Math.max(1, Math.floor(Math.random() * wordCount) + 1);

      // 生成挖空位置
      const blankPositions = this.generateBlankPositions(wordCount, blankCount);

      // 生成挖空显示
      this.currentQuestionData.blanks = words.map((word, index) => ({
        text: word,
        filled: !blankPositions.includes(index),
        position: index
      }));

      // 生成正确选项（完整的短语）
      const correctOption = {
        text: phrase.p,
        isCorrect: true,
        selected: false
      };

      // 将正确答案进行擦除
      this.currentQuestionData.blanks.forEach(blank => {
        if (blank.filled) {
          correctOption.text = correctOption.text.replace(blank.text, '');
        }
      })

      // 获取错误选项
      const wrongOptions = this.getWrongEnglishOptions(phrase.p, blankCount);

      // 将错误答案进行擦除
      for (let i = 0; i < wrongOptions.length; i++) {
        let option = wrongOptions[i];
        this.currentQuestionData.blanks.forEach(blank => {
          if (blank.filled) {
            option.text = option.text.replace(blank.text, '');
          }
        })

        const textWords = option.text.split(' ');
        var okSplit = correctOption.text.split(' ');
        const correctWords = []
        okSplit.forEach(word => {
          if (word) {
            correctWords.push(word)
          }
        })
        if (textWords.length > correctWords.length) {
          // 随机删除textWords的textWords.length-correctWords.length个单词
          const delTimes = textWords.length - correctWords.length
          for (let i = 0; i < delTimes; i++) {
            textWords.splice(Math.floor(Math.random() * textWords.length), 1);
          }
          option.text = ''
          textWords.forEach(word => {
            option.text += word + ' ';
          })
        }
      }

      this.currentQuestionData.options = this.shuffleArray([
        correctOption,
        ...wrongOptions
      ]);
    },

    // 生成挖空位置
    generateBlankPositions(wordCount, blankCount) {
      const positions = [];
      while (positions.length < blankCount) {
        const pos = Math.floor(Math.random() * wordCount);
        if (!positions.includes(pos)) {
          positions.push(pos);
        }
      }
      return positions.sort((a, b) => a - b);
    },

    // 获取错误的中文选项
    getWrongChineseOptions(correctMeaning) {
      const wrongOptions = [];
      const usedMeanings = new Set([correctMeaning]);

      // 从其他短语中获取错误选项
      this.allPhrases.forEach(phrase => {
        if (phrase['zh-mean'] !== correctMeaning && !usedMeanings.has(phrase['zh-mean'])) {
          wrongOptions.push({
            text: phrase['zh-mean'],
            isCorrect: false,
            selected: false
          });
          usedMeanings.add(phrase['zh-mean']);
        }
      });

      // 如果错误选项不足，生成一些随机错误选项
      while (wrongOptions.length < 3) {
        const wrongMeaning = this.generateRandomWrongMeaning(correctMeaning);
        if (!usedMeanings.has(wrongMeaning)) {
          wrongOptions.push({
            text: wrongMeaning,
            isCorrect: false,
            selected: false
          });
          usedMeanings.add(wrongMeaning);
        }
      }

      return wrongOptions.slice(0, 3); // 返回3个错误选项
    },

    // 获取错误的英文选项
    getWrongEnglishOptions(correctPhrase, blankCount) {
      const wrongOptions = [];
      const usedPhrases = new Set([correctPhrase]);
      const minOptions = blankCount * 2;

      // 从其他短语中获取错误选项
      this.allPhrases.forEach(phrase => {
        if (phrase.p !== correctPhrase && !usedPhrases.has(phrase.p)) {
          wrongOptions.push({
            text: phrase.p,
            isCorrect: false,
            selected: false
          });
          usedPhrases.add(phrase.p);
        }
      });

      // 生成一些相似但错误的选项
      while (wrongOptions.length < minOptions) {
        const wrongPhrase = this.generateSimilarWrongPhrase(correctPhrase);
        if (!usedPhrases.has(wrongPhrase)) {
          wrongOptions.push({
            text: wrongPhrase,
            isCorrect: false,
            selected: false
          });
          usedPhrases.add(wrongPhrase);
        }
      }

      return wrongOptions.slice(0, Math.max(3, minOptions));
    },

    // 生成随机错误中文意思
    generateRandomWrongMeaning(correctMeaning) {
      const wrongMeanings = [
        '进行，实施', '发展，开发', '建立，创建', '实现，完成',
        '支持，维护', '提高，增强', '改变，修改', '分析，研究'
      ];

      return wrongMeanings[Math.floor(Math.random() * wrongMeanings.length)];
    },

    // 生成相似但错误的英文短语
    generateSimilarWrongPhrase(correctPhrase) {
      const words = correctPhrase.split(' ');
      if (words.length <= 1) return correctPhrase;

      // 随机替换一个单词
      const replaceIndex = Math.floor(Math.random() * words.length);
      const similarWords = ['the', 'a', 'of', 'in', 'on', 'to', 'for', 'with'];

      words[replaceIndex] = similarWords[Math.floor(Math.random() * similarWords.length)];
      return words.join(' ');
    },

    // 选择选项
    selectOption(option) {
      if (this.showResult) return;

      // 取消之前的选择
      this.currentQuestionData.options.forEach(opt => {
        opt.selected = false;
      });

      // 选择当前选项
      option.selected = true;
      this.selectedOption = option;
      this.hasSelected = true;
    },

    // 获取选项样式类
    getOptionClass(option) {
      return {
        'selected': option.selected,
        'correct': option.isCorrect && this.showResult,
        'wrong': option.selected && !option.isCorrect && this.showResult
      };
    },

    // 提交答案
    submitAnswer() {
      if (!this.hasSelected) return;

      this.showResult = true;
      this.isAnswerCorrect = this.selectedOption.isCorrect;

      if (this.isAnswerCorrect) {
        this.score += 10;
        this.correctCount++;
        uni.vibrateShort();
        this.showToastMessage('success', '回答正确！+10分');
      } else {
        this.errors++;
        this.showToastMessage('error', '回答错误！');
      }
    },

    // 下一题
    nextQuestion() {
      if (this.currentQuestion >= this.totalQuestions || this.errors >= this.maxErrors) {
        this.endGame();
        return;
      }

      this.currentQuestion++;
      this.generateNewQuestion();
    },

    // 显示提示
    showHint() {
      if (this.hintsAvailable <= 0 || this.showResult) return;

      this.hintsAvailable--;

      // 高亮显示正确选项
      const correctOption = this.currentQuestionData.options.find(opt => opt.isCorrect);
      if (correctOption) {
        correctOption.selected = true;
        this.selectedOption = correctOption;
        this.hasSelected = true;
      }
    },

    // 结束游戏
    endGame() {
      this.gameResult = this.errors < this.maxErrors ? 'win' : 'lose';
      this.showGameOver = true;
    },

    // 重新开始游戏
    restartGame() {
      this.score = 0;
      this.currentQuestion = 1;
      this.errors = 0;
      this.correctCount = 0;
      this.showGameOver = false;
      this.usedPhrases.clear();
      this.initGame();
    },

    // 退出游戏
    exitGame() {
      uni.navigateBack();
    },

    // 工具函数
    shuffleArray(array) {
      const newArray = [...array];
      for (let i = newArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
      }
      return newArray;
    }
  }
};
</script>

<style scoped>
.phrase-training-game {
  padding: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* 游戏头部 */
.game-header {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  backdrop-filter: blur(10px);
}

.score-info, .progress-info, .error-info {
  display: flex;
  gap: 8rpx;
}

.score-label, .progress-label, .error-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.score-value, .progress-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
}

.error-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #e74c3c;
}

/* 游戏容器 */
.game-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

/* 题目类型 */
.question-type {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  gap: 20rpx;
}

.type-badge {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.type-hint {
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 题目区域 */
.question-area {
  margin-bottom: 40rpx;
}

.question-title {
  font-size: 32rpx;
  color: #2c3e50;
  display: block;
  text-align: center;
  margin-bottom: 20rpx;
}

/* 短语显示 */
.phrase-display {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 3rpx solid #3498db;
  border-radius: 16rpx;
  padding: 30rpx;
  text-align: center;
  margin: 20rpx 0;
}

.phrase-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
}

/* 挖空区域 */
.phrase-blanks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16rpx;
  margin: 30rpx 0;
  flex-wrap: wrap;
}

.blank-item {
  padding: 20rpx 30rpx;
  border-radius: 12rpx;
  background: #f8f9fa;
  border: 2rpx dashed #bdc3c7;
  min-width: 120rpx;
  text-align: center;
}

.blank-item.filled {
  background: #3498db;
  border: 2rpx solid #2980b9;
}

.blank-text {
  font-size: 28rpx;
  font-weight: bold;
  color: white;
}

.blank-placeholder {
  font-size: 28rpx;
  color: #bdc3c7;
  font-weight: bold;
}

.meaning-hint {
  font-size: 24rpx;
  color: #7f8c8d;
  text-align: center;
  display: block;
  margin-top: 16rpx;
}

/* 选项区域 */
.options-area {
  margin-bottom: 30rpx;
}

.chinese-options, .english-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.option-item {
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border: 2rpx solid #e0e0e0;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.option-item.selected {
  border-color: #3498db;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  transform: scale(1.05);
}

.option-item.correct {
  border-color: #27ae60;
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
}

.option-item.wrong {
  border-color: #e74c3c;
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
}

.option-text {
  font-size: 28rpx;
  color: #2c3e50;
  display: block;
}

.option-result {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.option-item.correct .option-result {
  color: #27ae60;
}

.option-item.wrong .option-result {
  color: #e74c3c;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.action-btn {
  flex: 1;
  padding: 20rpx;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.submit-btn:not(:disabled):active {
  transform: scale(0.95);
}

.hint-btn {
  background: linear-gradient(135deg, #f39c12, #d35400);
  color: white;
}

.btn-text {
  display: block;
}

/* Toast提示样式 */
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 30rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 20rpx;
  min-width: 300rpx;
  justify-content: center;
}

.toast-container.success .toast-content {
  border-left: 8rpx solid #27ae60;
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
}

.toast-container.error .toast-content {
  border-left: 8rpx solid #e74c3c;
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
}

.toast-icon {
  font-size: 48rpx;
  animation: bounce 0.5s ease-in-out;
}

.toast-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1.1);
  }
}

/* 游戏结束弹窗 */
.game-over-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  width: 80%;
  max-width: 600rpx;
}

.modal-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 40rpx;
  display: block;
}

.modal-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #3498db;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  padding: 20rpx;
  border: none;
  border-radius: 16rpx;
  color: white;
  font-size: 28rpx;
  width: 100%;
}

.restart-btn {
  background: #3498db;
}

.exit-btn {
  background: #95a5a6;
}

/* 响应式设计 */
@media (max-width: 750px) {
  .chinese-options, .english-options {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .toast-content {
    min-width: 250rpx;
    padding: 24rpx 32rpx;
  }

  .toast-text {
    font-size: 28rpx;
  }
}
</style>
